// 组件2，shadow盒子
// 向已有的html文件引入一个类组件（自己写的）
const boxStyle={
    width:'100px',
    height:'100px',
    background:'red',
    border:'2px solid black',
    textAlign:'center',
    lineHeight:'100px',
    color:'white',
    fontSize:'35px',
    fontStyle:'bold',
    position:'absolute',
    top:'35px',
    left:'20px',
    boxShadow: '#36c3f1 10px 0px 5px,yellow -10px 0px 5px,#d16df0 0px -10px 5px,#23f023 0px 10px 5px'
};
// const setin = createRoot(p);————为什么用不了react18的createRoot方法？？

const p = document.getElementById('root1');
const e = React.createElement;
// 必须使用React.createElement方法声明需要渲染的DOM元素，并在return中将其返回；
export default class App2 extends React.Component {
    render(){
        return e (
        'div',{style:boxStyle},'点我'
        ) 
    } 
}
// 方法二，使用getElementById获取html文件中待注入的DOM容器
ReactDOM.render(
    e(App2),p
)